<template>
    <!-- 主页主体布局 -->
    <el-container class="layout-container">
        <!-- 头部区域 -->
        <el-header>
            <!-- logo区域 -->
            <div>
               <img src="../assets/logo.gif" height="48" alt="" />
            </div>
            <!-- 右侧：退出 -->
            <el-button type="info" @click="logout" plain>退出登录</el-button>
        </el-header>
        <!-- 侧边栏和主体显示区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <!-- 菜单导航 -->
                 <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#222d32"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    unique-opened
                    router
                    >
                    <!-- 一级菜单 -->
                    <el-submenu :index="item.id" v-for="item in menuList" :key="item.id">
                        <!-- 图标与标题 -->
                        <template slot="title">
                            <i :class="item.icon"></i>
                            <span>{{item.title}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item :index="submenu.url" v-for="submenu in item.children" :key="submenu.id">
                            <i :class="submenu.icon"></i>
                            <span slot="title">{{submenu.title}}</span>
                        </el-menu-item>
                    </el-submenu>
                    
              </el-menu>
            </el-aside>
            <!-- 主体显示 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    // 加载页面就去访问方法
    created(){
       this.getMenuList();
    },
    data(){
        return {
            //赋值，默认菜单列表为null
            menuList:[]
        }
    },
    methods:{
        // 退出登录
        logout(){
            // 清除sessionStorage中的token
            window.sessionStorage.clear();
            // 跳转到登录界面
            this.$router.push("/login");
        },
        async getMenuList(){
          const {data:res} = await this.$http.get("sys/getMenuList");
          if(res.code == 200){
             this.menuList = res.data;
          }

        }
    }
}
</script>

<style>
   .layout-container{
       height: 100%;
   }
   .el-header{
       background-color: #009688;
       color: #ffffff;
       display:flex;
       justify-content:space-between;
       align-items: center;
   }
   .el-aside{
       background-color: #222d32;
   }
   .el-menu-item{
       color: white!important;;
   }
</style>
